<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>添加菜单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="添加选择">
                        <!-- 单选框是添加菜单还是添加权限 -->
                        <el-radio v-model="form.typeLevel" label="1">添加菜单</el-radio>
                        <el-radio v-model="form.typeLevel" label="2">添加权限</el-radio>
                    </el-form-item>
                    <div v-if="form.typeLevel == 1">
                        <!-- 下拉列表显示所有的爹 -->
                        <el-form-item label="父亲菜单">
                        <el-select v-model="form.parentId" placeholder="请选择">
                            <el-option v-for="item in menuList" :key="item.permId" :label="item.title" :value="item.permId"> </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="路由索引">
                            <el-input style="width: 220px" v-model="form.routerIndex"></el-input>
                        </el-form-item>
                        <el-form-item label="图片样式">
                            <el-input style="width: 220px" v-model="form.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单标题">
                            <el-input style="width: 220px" v-model="form.title"></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="form.typeLevel == 2">
                        <el-form-item label="菜单">
                        <el-select v-model="form.parentId" placeholder="请选择">
                            <el-option v-for="item in menuList" :key="item.permId" :label="item.title" :value="item.permId"> </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="权限值">
                            <el-input style="width: 220px" v-model="form.permVal"></el-input>
                        </el-form-item>
                        <el-form-item label="权限名字">
                            <el-input style="width: 220px" v-model="form.title"></el-input>
                        </el-form-item>
                    </div>

                    <!-- <el-form-item label="角色名字">
                        <el-input style="width: 220px" v-model="form.name"></el-input>
                    </el-form-item>
                -->

                    <el-form-item>
                        <el-button type="danger" style="width: 80px">取消</el-button>
                        <el-button type="primary" @click="onSubmit">添加菜单权限</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    name: 'baseform',
    data() {
        return {
            form: {
                name: '',
                typeLevel:'1',
                parentId:'',
                routerIndex:'',
                icon:'',
                title:'',
                permVal:'',
            },
            menuList:[
                {
                    permId: '-1',
                    title: '一级菜单'
                },
            ],
            radio: '1',
            options: [
                {
                    value: '-1',
                    label: '一级菜单'
                },
            ],
            value:''
        };
    },

    created(){
        //在这里需要获取所有的菜单
        this.initMenu();

    },
    methods: {
        initMenu(){
            this.$axios.get("/api/iotservice/menu/listAllMenu")
            .then(resp=>{
                if(!resp.data.code){
                    let dataBack=resp.data.dataMap.menuList
                    for(var i=0;i<dataBack.length;i++){
                       this.menuList.push(dataBack[i]);
                    }
                }else{
                    this.$message.error("初始化菜单信息失败")
                }
            },error=>{
                this.$message.error("初始化菜单信息失败:"+error.message)
            })
        },
        //添加菜单的地方
        onSubmit() {
            //这里应该发送请求到服务器去进行添加
            this.$axios.post("/api/iotservice/menu/addMenu",this.form)
            .then(resp=>{
                if(!resp.data.code){
                    bus.$emit("close_current_tags")
                }else{
                    this.$message.error("添加菜单失败")
                }
            },error=>{
                this.$message.error("添加菜单失败:"+error.message)
            })
        }
    }
};
</script>